Skip to content

Commit 1a69ed1

Browse files
mikeestomikeesto
committed
add categories to side bar
1 parent 4061d7a commit 1a69ed1

File tree

4 files changed

+146
-105
lines changed

4 files changed

+146
-105
lines changed

‎gatsby-node.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ exports.createPages = async ({ graphql, actions }) => {
148148
}
149149
}
150150
}
151-
tagsGroup: allMarkdownRemark(limit: 2000) {
151+
tagsGroup: allMarkdownRemark {
152152
group(field: frontmatter___tags) {
153153
fieldValue
154154
}

‎src/assets/css/_css/docs.less

+89-77
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "variables.less";
22

33
.documentationContent {
4-
margin-top:3px;
4+
margin-top: 3px;
55
margin-bottom: 8em;
66
display: flex;
77
width: 100%;
@@ -13,123 +13,122 @@
1313
}
1414
}
1515

16-
.headerline{
16+
.headerline {
1717
display: flex;
1818
// padding-right: 5px;
1919
// justify-content: center;
2020
}
2121

2222
.main-block-blog {
23-
/* background-color: #f0ece2; */
24-
background-color: #fff;
25-
padding: 10px;
26-
margin: 10px;
27-
margin-bottom: 100px;
28-
justify-content: center;
29-
position: relative;
30-
flex-flow: row;
31-
text-align: center;
23+
/* background-color: #f0ece2; */
24+
background-color: #fff;
25+
padding: 10px;
26+
margin: 10px;
27+
margin-bottom: 100px;
28+
justify-content: center;
29+
position: relative;
30+
flex-flow: row;
31+
text-align: center;
3232
}
3333

34-
.column{
34+
.column {
3535
// padding: 0 10px;
3636
box-sizing: border-box;
3737
border: 3px rgb(44, 38, 38);
3838
justify-content: space-around;
39-
margin-right: 15px;
40-
// width: 800px;
41-
// height: 250px;
39+
margin-right: 15px;
40+
// width: 800px;
41+
// height: 250px;
4242
}
4343

4444
.container-bl {
4545
display: flex;
4646
justify-content: center;
47-
/* align-items: center; */
48-
// padding: 10px;
49-
flex-direction: row;
50-
// max-width: 1000px;
51-
margin-right: 10px;
52-
justify-content: space-around;
47+
/* align-items: center; */
48+
// padding: 10px;
49+
flex-direction: row;
50+
// max-width: 1000px;
51+
margin-right: 10px;
52+
justify-content: space-around;
5353
}
5454

5555
.container-bl1 {
5656
display: flex;
5757
justify-content: center;
58-
/* align-items: center; */
59-
// padding: 10px;
60-
flex-direction: row;
61-
// max-width: 1000px;
62-
margin-right: 10px;
63-
justify-content: space-around;
58+
/* align-items: center; */
59+
// padding: 10px;
60+
flex-direction: row;
61+
// max-width: 1000px;
62+
margin-right: 10px;
63+
justify-content: space-around;
6464
}
6565

66-
.codetitle{
67-
font-family: 'Rubik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
66+
.codetitle {
67+
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
6868
font-weight: 300;
6969
color: #202020;
7070
font-size: 22px;
7171
line-height: 30.8px;
7272
}
7373

7474
.article {
75-
background: white;
76-
/* background-image: url(../imgs/corona-virus.jpg) ; */
77-
/* filter: blur(8px); */
78-
// margin: 0 0 20px;
79-
padding: 5px;
80-
// border-radius: 1.5px;
81-
// border: 0.7px solid black;
82-
// box-shadow: 0 2px 4px #010101;
83-
cursor: pointer;
75+
background: white;
76+
/* background-image: url(../imgs/corona-virus.jpg) ; */
77+
/* filter: blur(8px); */
78+
// margin: 0 0 20px;
79+
padding: 5px;
80+
// border-radius: 1.5px;
81+
// border: 0.7px solid black;
82+
// box-shadow: 0 2px 4px #010101;
83+
cursor: pointer;
8484
transition: 0.3s ease;
8585
width: 140px;
8686
height: 160px;
8787
}
8888

8989
.article:active {
90-
box-shadow: none;
91-
transform-origin: center;
92-
transform: scale(0.98);
90+
box-shadow: none;
91+
transform-origin: center;
92+
transform: scale(0.98);
9393
}
9494

9595
.article_category {
96-
display: inline-block;
97-
// background: rgb(235, 150, 206);
98-
/* 47bbc5 */
99-
padding: 5px 8px;
100-
border: black;
101-
// border-radius: 10px;
102-
margin: 0 0 10px;
103-
color: white;
104-
font-size: 0.75rem;
105-
font-weight: 600;
106-
letter-spacing: 0.075rem;
96+
display: inline-block;
97+
// background: rgb(235, 150, 206);
98+
/* 47bbc5 */
99+
padding: 5px 8px;
100+
border: black;
101+
// border-radius: 10px;
102+
margin: 0 0 10px;
103+
color: white;
104+
font-size: 0.75rem;
105+
font-weight: 600;
106+
letter-spacing: 0.075rem;
107107
text-transform: uppercase;
108108
width: 100px;
109109
height: 100px;
110110
}
111111

112112
.article_excerpt {
113-
color: black;
114-
line-height: 1.5rem;
115-
font-size: 0.875rem;
113+
color: black;
114+
line-height: 1.5rem;
115+
font-size: 0.875rem;
116116
}
117117

118118
.article_title {
119-
margin: 0 0 10px;
120-
color: #E10098;
121-
font-family: "Josefin Sans";
122-
font-size: 1.25rem;
123-
// font-weight: 600;
124-
line-height: 1.75rem;
119+
margin: 0 0 10px;
120+
color: #e10098;
121+
font-family: "Josefin Sans";
122+
font-size: 1.25rem;
123+
// font-weight: 600;
124+
line-height: 1.75rem;
125125
}
126126

127-
128127
@media only screen and (min-width: 320px) and (max-width: 650px) {
129-
.container-bl1 {
130-
flex-direction: column;
131-
width: 100%;
132-
}
128+
.container-bl1 {
129+
flex-direction: column;
130+
width: 100%;
131+
}
133132
}
134133

135134
.inner-content {
@@ -168,11 +167,9 @@
168167

169168
.prism {
170169
position: relative;
171-
box-shadow:
172-
inset 0 1px 0 rgba(0,0,0,0.08),
173-
inset 0 -1px 0 rgba(0,0,0,0.08),
174-
inset -1px 0 0 rgba(0,0,0,0.08),
175-
inset 4px 0 0 rgba(0,0,0,0.08);
170+
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.08),
171+
inset 0 -1px 0 rgba(0, 0, 0, 0.08), inset -1px 0 0 rgba(0, 0, 0, 0.08),
172+
inset 4px 0 0 rgba(0, 0, 0, 0.08);
176173
border-radius: 3px;
177174

178175
.line-highlight {
@@ -198,7 +195,8 @@
198195
.not(code) > pre.prism {
199196
text-shadow: 0 1px white;
200197

201-
&::-moz-selection, &::selection {
198+
&::-moz-selection,
199+
&::selection {
202200
text-shadow: none;
203201
}
204202
}
@@ -220,14 +218,17 @@
220218
}
221219

222220
border-radius: 3px;
223-
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
221+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
224222
padding: 0.7em 1.5em 0.5em 1em;
225223

226-
&:hover, &:focus, &:active {
224+
&:hover,
225+
&:focus,
226+
&:active {
227227
background: @rhodamine-color;
228228
text-decoration: none;
229229

230-
.read-next-continue, .read-next-title {
230+
.read-next-continue,
231+
.read-next-title {
231232
color: white;
232233
}
233234
}
@@ -282,7 +283,9 @@
282283
color: #666;
283284
display: block;
284285

285-
&:hover, &:focus, &.active {
286+
&:hover,
287+
&:focus,
288+
&.active {
286289
text-decoration: none;
287290
color: @rhodamine-color;
288291
}
@@ -292,7 +295,7 @@
292295
.blog-sidebar {
293296
.recent-posts {
294297
li {
295-
border-bottom: 1px solid #DDD;
298+
border-bottom: 1px solid #ddd;
296299
line-height: 18px;
297300
padding: 10px 0;
298301
font-weight: bold;
@@ -304,3 +307,12 @@
304307
}
305308
}
306309
}
310+
311+
.blog-sidebar {
312+
.categories {
313+
li {
314+
font-weight: bold;
315+
color: @rhodamine-color;
316+
}
317+
}
318+
}

‎src/components/BlogSidebar/index.tsx

+55-26
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,63 @@
1-
import React from 'react';
2-
import { Link } from "gatsby"
1+
import React from "react"
2+
import { Link, useStaticQuery, graphql } from "gatsby"
33

44
interface Props {
55
posts: any[]
66
currentPermalink?: string
77
}
88

9-
const BlogSidebar = ({ posts, currentPermalink }: Props) => (
10-
<div className="nav-docs blog-sidebar">
11-
<div className="nav-docs-section subscribe">
12-
<h3>Subscribe</h3>
13-
<a rel="home" type="application/rss+xml" href="/blog/rss.xml">
14-
RSS
15-
</a>
16-
</div>
17-
<div className="nav-docs-section recent-posts">
18-
<h3>Recent Posts</h3>
19-
<ul>
20-
{posts.map(({ frontmatter }, i) => (
21-
<li key={i}>
22-
{frontmatter.permalink === currentPermalink ? (
23-
frontmatter.title
24-
) : (
25-
<Link to={frontmatter.permalink}>{frontmatter.title}</Link>
26-
)}
27-
</li>
28-
))}
29-
</ul>
9+
const BlogSidebar = ({ posts, currentPermalink }: Props) => {
10+
const allTags = useStaticQuery(graphql`
11+
query allTags {
12+
allMarkdownRemark {
13+
group(field: frontmatter___tags) {
14+
fieldValue
15+
}
16+
}
17+
}
18+
`).allMarkdownRemark.group
19+
20+
return (
21+
<div className="nav-docs blog-sidebar">
22+
<div className="nav-docs-section subscribe">
23+
<h3>Subscribe</h3>
24+
<a rel="home" type="application/rss+xml" href="/blog/rss.xml">
25+
RSS
26+
</a>
27+
</div>
28+
<div className="nav-docs-section categories">
29+
<h3>Categories</h3>
30+
<ul>
31+
{allTags.map(({ fieldValue }: { fieldValue: string }, i: number) => {
32+
const tag = fieldValue[0].toUpperCase() + fieldValue.substring(1)
33+
return (
34+
<li key={i}>
35+
{fieldValue === currentPermalink ? (
36+
tag
37+
) : (
38+
<Link to={`/tags/${fieldValue}`}>{tag}</Link>
39+
)}
40+
</li>
41+
)
42+
})}
43+
</ul>
44+
</div>
45+
<div className="nav-docs-section recent-posts">
46+
<h3>Recent Posts</h3>
47+
<ul>
48+
{posts.map(({ frontmatter }, i) => (
49+
<li key={i}>
50+
{frontmatter.permalink === currentPermalink ? (
51+
frontmatter.title
52+
) : (
53+
<Link to={frontmatter.permalink}>{frontmatter.title}</Link>
54+
)}
55+
</li>
56+
))}
57+
</ul>
58+
</div>
3059
</div>
31-
</div>
32-
)
60+
)
61+
}
3362

34-
export default BlogSidebar;
63+
export default BlogSidebar

‎src/templates/tags.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export default ({ pageContext, data }: any) => {
6161
)
6262
)}
6363
</div>
64-
<BlogSidebar posts={allPosts} />
64+
<BlogSidebar posts={allPosts} currentPermalink={tag} />
6565
</div>
6666
</section>
6767
</Layout>

0 commit comments

Comments
 (0)