Skip to content

Commit

Permalink
fix: 修复GitHub改版导致趋势榜无法更新 #27
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Jun 14, 2019
1 parent eab4bd0 commit 9e04936
Show file tree
Hide file tree
Showing 2 changed files with 106 additions and 73 deletions.
82 changes: 69 additions & 13 deletions src/pages/Github.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,19 @@ import optionLang from '../source/trending.json';

const githublist = localStorage.getItem('github-list');

const starSVG = (
<svg viewBox="0 0 14 16" version="1.1" width="14" height="16" role="img">
<path fillRule="evenodd" d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z" />
</svg>
);

export default class Github extends Component {
static typeName = 'trending'
static typeName = 'trending';
constructor(props) {
super(props);
this.state = {
loading: false,
content: githublist,
content: githublist ? JSON.parse(githublist) : null,
option: [
{
label: '今天',
Expand Down Expand Up @@ -49,8 +55,11 @@ export default class Github extends Component {
return url;
}
getTrending(type) {
const localContent = localStorage.getItem('github-list');
let localContent = localStorage.getItem('github-list');
if (!localContent) type = 'select'; // 判断是否直接选择
else {
localContent = JSON.parse(localContent);
}
this.setState({ loading: true });
const getDate = type === 'select' ? fetchTimely(this.getURL()) : fetchInterval(this.getURL(), 3, 'github-trending');
getDate.then((response) => {
Expand All @@ -64,23 +73,36 @@ export default class Github extends Component {
}
return node;
});
const resultData = [];
const $ = cheerio.load(response);
// 清除头像，避免被和谐
$('.f6 .mr-3').not('.mr-3:first-child').empty();
$('.starring-container').empty();
const _html = $('div.explore-content').html();
if (!_html) return;
localStorage.setItem('github-list', _html);
$('.Box-row').each(function (idx, item) {
// 不需要头像，避免被和谐
const full_name = $(item).find('h1 a').text().replace(/(\n|\s)/g, '');
const href = $(item).find('h1 a').attr('href').replace(/(\n|\s)/g, '');
const language = $(item).find('span[itemprop=programmingLanguage]').text().replace(/(\n|\s)/g, '');
const languageColor = $(item).find('span.repo-language-color');
const stargazers_count = $(item).find('svg[aria-label="star"].octicon.octicon-star').parent().text().replace(/(\n|\s|,)/g, '');
const forked = $(item).find('svg[aria-label="fork"].octicon.octicon-repo-forked').parent().text().replace(/(\n|\s|,)/g, '');
const todayStar = $(item).find('.float-sm-right svg.octicon.octicon-star').parent().text().replace(/(\n|,)/g, '').trim();
const description = $(item).find('p.text-gray').text().replace(/(\n)/g, '').trim();
let color = '';
if (language && languageColor && languageColor.css) {
color = languageColor.css('background-color');
}
resultData.push({ full_name, language, color, description, forked, stargazers_count: Number(stargazers_count), todayStar, html_url: href, rank: idx + 1 });
});
if (!resultData) return;
localStorage.setItem('github-list', JSON.stringify(resultData));
if (!this.mounted) return;
this.setState({
loading: false,
content: _html,
content: resultData,
});
}).catch(() => {
}).catch((err) => {
this.setState({ loading: false });
if (!this.mounted) return;
this.setState({
content: githublist || '请求错误，请检查网路，或者重新刷新请求数据！',
content: this.state.content || '请求错误，请检查网路，或者重新刷新请求数据！',
});
});
}
Expand All @@ -98,6 +120,7 @@ export default class Github extends Component {
});
}
render() {
const { content } = this.state;
return (
<div className={styles.warpper}>
<div className={styles.header}>
Expand All @@ -115,7 +138,40 @@ export default class Github extends Component {
/>
</div>
</div>
<div className={styles.list} dangerouslySetInnerHTML={{ __html: this.state.content || 'loading...' }} />
<div className={styles.list}>
{!content ? (
<div>Loading...</div>
) : (
<ul>
{content.map((item) => {
return (
<li>
<h3>
<a href={item.html_url}>{item.full_name}</a>
</h3>
<div className={styles.description}>
{item.description}
</div>
<div>
<span className={styles.language}><span style={{ backgroundColor: item.color }}/>{item.language}</span>
<span className={styles.star}>
{starSVG}
<span>{item.stargazers_count}</span>
</span>
<span className={styles.forked}>
<svg viewBox="0 0 10 16" version="1.1" width="10" height="16" role="img">
<path fillRule="evenodd" d="M8 1a1.993 1.993 0 0 0-1 3.72V6L5 8 3 6V4.72A1.993 1.993 0 0 0 2 1a1.993 1.993 0 0 0-1 3.72V6.5l3 3v1.78A1.993 1.993 0 0 0 5 15a1.993 1.993 0 0 0 1-3.72V9.5l3-3V4.72A1.993 1.993 0 0 0 8 1zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3 10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm3-10c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z" />
</svg>
<span>{item.forked}</span>
</span>
<span className={styles.todayStar}>{starSVG}<span>{item.todayStar}</span></span>
</div>
</li>
)
})}
</ul>
)}
</div>
{githublist && <Footer>已显示全部内容</Footer>}
</div>
);
Expand Down
97 changes: 37 additions & 60 deletions src/pages/Github.module.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,31 @@
}

.list {
padding: 0 10px;
ul {
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
a {
text-decoration: none;
}
ol, li, h3 {
li, h3 {
margin: 0;
padding: 0;
}
ol, li {
list-style: none;
}
li {
list-style: none;
min-width: 0;
box-sizing: border-box;
background-color: #fff;
border-radius: 3px;
transition: all .3s;
margin-bottom: 10px;
padding: 10px;
flex: calc(~"50% - 10px");
margin-left: 5px;
margin-right: 5px;
padding: 10px;
border-radius: 3px;
transition: all .3s;
width: calc(~"50% - 10px");
display: inline-block;
&:hover {
background-color: #f9f9f9;
Expand All @@ -65,61 +70,33 @@
text-decoration: underline;
}
}
}
:global {
.repo-list {
display: flex;
flex-wrap: wrap;
font-size: 12px;
}
.repo-language-color {
position: relative;
top: 1px;
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
}
.avatar {
display: inline-block;
overflow: hidden;
line-height: 1;
vertical-align: middle;
border-radius: 3px;
border-style: none;
height: 12px;
width: 12px;
}
.mr-3 {
margin-right: 10px;
}
.float-sm-right {
float: right;
.description {
padding: 8px 0;
line-height: 14px;
min-height: 28px;
}
.octicon {
vertical-align: text-bottom;
.star, .language, .forked, .todayStar {
display: inline-block;
fill: currentColor;
}
.d-inline-block {
display: inline-block;
}
.float-right {
float: right;
a {
color: #0366d6;
margin-right: 8px!important;
svg {
vertical-align: middle;
margin-right: 5px;
height: 14px;
margin-top: -3px;
}
}
.text-gray {
color: #586069;
a:first-child {
margin-right: 10px;
}
span + a, a + a {
margin-right: 10px;
}
a {
color: #586069;
.star {
svg {}
}
.language {
span {
border-radius: 50%;
display: inline-block;
height: 12px;
position: relative;
top: 1px;
width: 12px;
margin-right: 5px;
}
}
}
Expand Down

0 comments on commit 9e04936

Please sign in to comment.