Skip to content

Commit 97d5b60

Browse files
ardatanardatan
committed
Expansible code examples
1 parent b9b2e0f commit 97d5b60

File tree

3 files changed

+129
-106
lines changed

3 files changed

+129
-106
lines changed

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

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@
6767
flex-direction: row;
6868
width: 40%;
6969
p {
70+
min-width: 72px;
7071
width: 20%;
7172
margin: 0;
7273
color: #8c8c8c;
@@ -104,8 +105,14 @@
104105
font-family: "Rubik", "Helvetica Neue", Helvetica, Arial, sans-serif;
105106
}
106107
.language-boxes {
108+
display: grid;
109+
grid-row-gap: 20px;
110+
grid-column-gap: 30px;
111+
grid-template-columns: auto auto auto;
112+
@media screen and (min-width: 1020px) {
113+
grid-template-columns: auto auto auto auto auto auto;
114+
}
107115
.language-box {
108-
margin-right: 30px;
109116
border: 1px solid #979797;
110117
min-width: 142px;
111118
height: 120px;
@@ -187,9 +194,21 @@
187194
}
188195
.library-howto {
189196
width: 60%;
190-
// max-height: 550px;
191-
// overflow-y: auto;
192-
// overflow-x: hidden;
197+
.library-howto-content {
198+
transition: max-height 0.25s ease-in;
199+
}
200+
}
201+
.library-howto-expand {
202+
border-top-style: solid;
203+
border-top-color: #C4C4C4;
204+
border-top-width: 3px;
205+
background-image: url(http://github.com/static/img/downarrow.svg%3C/span%3E);
206+
background-position: center;
207+
background-repeat: no-repeat;
208+
width: 100%;
209+
min-height: 40px;
210+
display: block;
211+
cursor: pointer;
193212
}
194213
}
195214
}

‎src/pages/code.tsx

Lines changed: 103 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,123 @@
11
import { AnchorLink } from "gatsby-plugin-anchor-links"
2-
import React from "react"
2+
import React, { useState } from "react"
33
import Layout from "../components/Layout"
44
import Marked from "../components/Marked"
55
import { toSlug } from "../utils/slug"
66

77
export function buildLanguagesMenu(pageContext: any) {
8-
let lastRow: string[]
9-
const rows: string[][] = []
10-
pageContext.languageList.forEach(
11-
({ name: languageName }: any, index: number) => {
12-
if (index % 6 === 0) {
13-
lastRow = [languageName]
14-
rows.push(lastRow)
15-
} else {
16-
lastRow.push(languageName)
17-
}
18-
}
8+
return (
9+
<div className="language-boxes">
10+
{pageContext.languageList.map(({ name: languageName }) => {
11+
const slug = toSlug(languageName)
12+
return (
13+
<AnchorLink
14+
to={`#${slug}`}
15+
className="article language-box"
16+
title={languageName}
17+
>
18+
<span className="article_title">{languageName}</span>
19+
</AnchorLink>
20+
)
21+
})}
22+
</div>
1923
)
24+
}
25+
26+
export function buildLibraryContent(library: any, pageContext: any) {
27+
const [ overflown, setOverflown ] = useState(false);
28+
const [ expanded, setExpanded ] = useState(false);
2029
return (
21-
<div>
22-
{rows.map(row => (
23-
<>
24-
<div className="container-bl language-boxes">
25-
{row.map(languageName => {
26-
const slug = toSlug(languageName)
27-
return (
28-
<AnchorLink
29-
to={`#${slug}`}
30-
className="article language-box"
31-
title={languageName}
32-
>
33-
<span className="article_title">{languageName}</span>
34-
</AnchorLink>
35-
)
36-
})}
30+
<div className="library-info">
31+
<div className="library-details">
32+
<a className="library-name" href={library.url} target="_blank">
33+
<p>{library.name}</p>
34+
</a>
35+
{library.github && (
36+
<div className="library-detail">
37+
<b>GitHub</b>
38+
<a href={`https://github.com/${library.github}`} target="_blank">
39+
{library.github}
40+
</a>
41+
</div>
42+
)}
43+
{library.npm && (
44+
<div className="library-detail">
45+
<b>npm</b>
46+
<a
47+
href={`https://www.npmjs.com/package/${library.npm}`}
48+
target="_blank"
49+
>
50+
{library.npm}
51+
</a>
52+
</div>
53+
)}
54+
{library.gem && (
55+
<div className="library-detail">
56+
<b>gem</b>
57+
<a
58+
href={`https://rubygems.org/gems/${library.gem}`}
59+
target="_blank"
60+
>
61+
{library.gem}
62+
</a>
3763
</div>
64+
)}
65+
{library.lastRelease && (
66+
<div className="library-detail">
67+
<b>Last Release</b>
68+
<span>{library.formattedLastRelease}</span>
69+
</div>
70+
)}
71+
{library.stars && (
72+
<div className="library-detail">
73+
<b>Stars</b>
74+
<span>{library.formattedStars}</span>
75+
</div>
76+
)}
77+
{library.license && (
78+
<div className="library-detail">
79+
<b>License</b>
80+
<span>{library.license}</span>
81+
</div>
82+
)}
83+
{library.howto ? (
84+
<div className="library-description">
85+
<Marked pageContext={pageContext}>{library.description}</Marked>
86+
</div>
87+
) : (
3888
<br />
39-
</>
40-
))}
89+
)}
90+
</div>
91+
<div className="library-howto">
92+
<div
93+
className="library-howto-content"
94+
style={{
95+
maxHeight: expanded ? "100%" : "450px",
96+
overflow: "hidden",
97+
}}
98+
ref={el => {
99+
if (el && !overflown) {
100+
setOverflown(el.clientHeight < el.scrollHeight)
101+
}
102+
}}
103+
>
104+
<Marked pageContext={pageContext}>
105+
{library.howto || library.description}
106+
</Marked>
107+
</div>
108+
{overflown && <div
109+
className="library-howto-expand"
110+
onClick={() => setExpanded(!expanded)}
111+
/> }
112+
</div>
41113
</div>
42114
)
43115
}
44116

45117
export function buildLibraryList(libraries: any[], pageContext: any) {
46118
return (
47119
<div className="library-list">
48-
{libraries.map(library => (
49-
<div className="library-info">
50-
<div className="library-details">
51-
<a className="library-name" href={library.url} target="_blank">
52-
<p>{library.name}</p>
53-
</a>
54-
{library.github && (
55-
<div className="library-detail">
56-
<b>GitHub</b>
57-
<a
58-
href={`https://github.com/${library.github}`}
59-
target="_blank"
60-
>
61-
{library.github}
62-
</a>
63-
</div>
64-
)}
65-
{library.npm && (
66-
<div className="library-detail">
67-
<b>npm</b>
68-
<a
69-
href={`https://www.npmjs.com/package/${library.npm}`}
70-
target="_blank"
71-
>
72-
{library.npm}
73-
</a>
74-
</div>
75-
)}
76-
{library.gem && (
77-
<div className="library-detail">
78-
<b>gem</b>
79-
<a
80-
href={`https://rubygems.org/gems/${library.gem}`}
81-
target="_blank"
82-
>
83-
{library.gem}
84-
</a>
85-
</div>
86-
)}
87-
{library.lastRelease && (
88-
<div className="library-detail">
89-
<b>Last Release</b>
90-
<span>{library.formattedLastRelease}</span>
91-
</div>
92-
)}
93-
{library.stars && (
94-
<div className="library-detail">
95-
<b>Stars</b>
96-
<span>{library.formattedStars}</span>
97-
</div>
98-
)}
99-
{library.license && (
100-
<div className="library-detail">
101-
<b>License</b>
102-
<span>{library.license}</span>
103-
</div>
104-
)}
105-
{library.howto ? (
106-
<div className="library-description">
107-
<Marked pageContext={pageContext}>{library.description}</Marked>
108-
</div>
109-
) : (
110-
<br />
111-
)}
112-
</div>
113-
<div className="library-howto">
114-
<Marked pageContext={pageContext}>
115-
{library.howto || library.description}
116-
</Marked>
117-
</div>
118-
</div>
119-
))}
120+
{libraries.map(library => buildLibraryContent(library, pageContext))}
120121
</div>
121122
)
122123
}

‎static/img/downarrow.svg

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)